<template>
  <div class='custom-detail-container'>
    <div class="certificate-box">
      <el-button type="primary" @click="back">返回</el-button>
    </div>
    <div class="record-info">
      <p>发起时间：{{ checkRecordDetail.created }}</p>
      <p>发起人：{{ checkRecordDetail.created_by_name }}</p>
      <p>目前状态：{{ checkRecordDetail.status_name }}</p>
    </div>
    <div class="record-steps">
      <div v-for="(item, index) in checkRecordDetail.list" :key="index" class="record-steps-item">
        <div class="icon">
          <i class="el-icon-check"></i>
        </div>
        <h2 @click="slide(item)">
          {{ item.check_item_name }}
          <span v-if="index === 0">发起人：{{ item.created_by_name }}</span>
          <span v-if="index !== 0">执行人：{{ item.created_by_name }}</span>
          <span>{{ item.created_at }}</span>
          <span class="certificate-btn" v-if="item.is_gcy=='1'" @click="toGCYLink(item)">
            <i class="el-icon-circle-check elIcon"></i>
            <span class="certificate_span">工程云凭证</span>
          </span>
        </h2>
        <div :style="{ 'height': item.height + 'px' }" class="content">
          <!-- <p>检查区域：<span>南区</span></p>
          <p>检查区域：<span>南区</span></p>
          <p>检查区域：<span>南区</span></p>
          <p>检查区域：<span>南区</span></p>
          <p>检查区域：<span>南区</span></p>
          <p>检查区域：<span>南区</span></p> -->
          <RecordContentDetail :contentDetail="item.content_detail"></RecordContentDetail>
        </div>
        <i @click="slide(item)" :class="{ 'fold': item.height === 0 }" class="arrow el-icon-arrow-down"></i>

      </div>
    </div>
  </div>
</template>
<script>
import { CustomTableApi } from '@/services/SystemSetting'
import RecordContentDetail from '@/pages/ConfigCenter/CustomTable/components/RecordContentDetail'
export default {
  data() {
    return {
      recordId: '',
      showGCYCertificate: true,
      checkRecordDetail: {
        created: '',
        created_by_name: '',
        list: []
      }
    }
  },
  components: {
    RecordContentDetail
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    toGCYLink(item) {
      let id = '';
      let channelName = '';
      let fileName = '';
      if(item.gcy_attachment){
        id = item.gcy_attachment[0][0].second;
        channelName = item.gcy_attachment[0][0].first;
        fileName = item.gcy_attachment[0][0].fileName
      }
      const link = "https://tdh.sucsoft.com.cn/#/main?id=" + id + "&channelName=" + channelName + "&fileName="+ fileName;
      // window.location.href = link;
      window.open(link);
    },
    slide(item) {
      item.height = item.height === 500 ? 0 : 500
    },
    getRecordDetail() {
      CustomTableApi.getCheckRecordDetail({
        params: {
          check_record_id: this.recordId
        }
      }).then(res => {
        if (res.code === 0) {
          this.checkRecordDetail = Object.assign(this.checkRecordDetail, res.data)
          let list = this.checkRecordDetail.list
          if (list.length > 0) {
            this.checkRecordDetail.created = list[0].created_at
            this.checkRecordDetail.created_by_name = list[0].created_by_name
          }

          list.map((item) => {
            this.$set(item, 'height', 500)
          })
        }
      })
    }
  },
  created() {
    this.recordId = this.$route.query.id
    this.getRecordDetail()
  },
  mounted() {
  }
}
</script>
<style scoped lang='scss'>
.custom-detail-container {
  padding: 20px;

  .certificate-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-button {
    margin-bottom: 20px;
  }

  .record-info {
    margin-bottom: 20px;
    color: #999;

    p {
      margin-bottom: 10px;
    }
  }

  .record-steps {
    display: flex;
    flex-direction: column;
    padding-left: 10px;

    .record-steps-item {
      width: 100%;
      position: relative;
      padding: 0 0 30px 30px;
      border-left: 1px solid #ccc;

      .icon {
        background: #1890ff;
        font-size: 20px;
        position: absolute;
        left: -15px;
        top: -5px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      h2 {
        margin-bottom: 20px;
        cursor: pointer;
        display: flex;
          align-items: center;
        span {
          color: #999;
          font-size: 14px;
          font-weight: normal;
          margin-right: 30px;

          &:first-child {
            padding-left: 20px;
          }
        }

        .certificate-btn {
          margin-left: 100px;
          display: inline-block;
          display: flex;
          align-items: center;
          height: 40px;
          width: 160px;
          padding: 0 20px;
          box-sizing: border-box;
          text-align: center;
          line-height: 40px;
          border-radius: 20px;
          margin-bottom: 20px;
          background-color: #165dff;
          cursor: pointer;
          .elIcon{
            color: #fff !important;
            font-size: 20px;
            margin-left: 10px;
          }
          .certificate_span{
            display: inline-block;
            color: #fff !important;
            height: 40px;
            line-height: 40px;
            margin: 0;
            padding: 0;
            margin-left: 10px;
          }
        }
      }

      .arrow {
        position: absolute;
        right: 0;
        top: 5px;
        font-size: 20px;
        transition: transform 0.6s ease;
        cursor: pointer;

        &.fold {
          transform: rotate(-180deg);
        }
      }

      .content {
        height: 300px;
        transition: all 0.6s ease;
        overflow: hidden;
        overflow-y: scroll;
        position: relative;

        p {
          color: #999;
          margin-bottom: 10px;

          span {
            color: #000;
          }
        }
      }
    }
  }
}
</style>
